<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>07_元素遍历操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 元素遍历操作  针对DOM树中进行遍历【父子级关系】 
		children() 功能：获取匹配元素集合中每个元素的直接子元素
		parent()   功能：获取匹配元素集合中每个元素的直接父元素
		
		siblings() 功能：获取匹配元素集合中每个元素所有兄弟元素
		
		next()     功能：获取匹配元素集合中每个元素下一个兄弟元素
		prev()     功能：获取匹配元素集合中每个元素上一个兄弟元素
		
		each()     功能：遍历匹配元素的集合，对每个执行指定的函数
		-->
		
		<style>
			.container{
				border: 1px solid red;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background: #aa55ff;
				margin: 10px;
				padding: 10px;
			}
			button{
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
		</div>
		<button id="getcrBtn">获取直接子元素</button>
		<button id="getpBtn">获取父元素</button>
		<button id="getsBtn">获取兄弟元素</button>
		<button id="getnBtn">获取下一个兄弟元素</button>
		<button id="getprBtn">获取上一个兄弟元素</button>
		<button id="eachBtn">遍历元素</button>
		<script>
			/* 1.点击 获取直接子元素 按钮 .container父元素 给.box元素加  10px */
			$("#getcrBtn").click(function(){
				$(".container").children().css("border","10px solid red");
			});
			/* 2. 点击 获取父元素 按钮 .container父元素 加背景色*/
			$("#getpBtn").click(function(){
				$(".box").parent().css("background","#f00");
			});
			/* 3. */
			$("#getsBtn").click(function(){
				$("#box3").siblings().css("background","red")
			});
			/* 4. */
			$("#getnBtn").click(function(){
				$("#box2").next().css("background","#eee")
			});
			/* 5. */
			$("#getprBtn").click(function(){
				$("#box4").prev().css({
					"border-radius":"50%",
					"width":"100px",
					"height":"100px",
					"box-shadow":"5px 5px 5px #000",
					"font-size":"25px",
					"text-align":"center",
					"line-height":"100px",
			});
			});
			/* 6.点击  遍历元素   按钮  实现 动态输出这是box1 ...
			 each(function(index,element){传入下标${index}})
			 注意：千万不要加单双引号，别加拼接符
			 加反引号可以
			 */
			$("#eachBtn").click(function(){
				$(".box").each(function(i,e){
					//i  下标  e  元素--形参
					$(e).text(`这是第${i+1}盒子`);
				});
			});
		</script>
	</body>
</html>